import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'umi';
import styles from './index.less';
import { Upload, message, Button, Transfer } from 'antd';
const Dragger = Upload.Dragger;
import { UploadOutlined } from '@ant-design/icons';
import { difference, concat, forEach, find } from 'lodash';
import {
  getTimeRange,
  getPermisstion,
} from 'enoad-component-web/dist/src/core/util';

/**
 * Excel 导入导出功能。
 * @param props
 * @returns
 */
const XlsxController = (props) => {
  //---------------设置列
  const [visableTransfer, setVisableTransfer] = useState(true);
  const [mockData, setMockData] = useState([]);
  const [targetKeys, setTargetKeys] = useState([]);

  const [targetSelectedKeys, setTargetSelectedKeys] = useState([]);

  const onChange = (info) => {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  };

  const getMock = () => {
    const targetKeys = [];
    const mockData = [];
    for (let i = 0; i < 20; i++) {
      const data = {
        key: i.toString(),
        title: `content${i + 1}`,
        description: `content${i + 1}`,
      };
      if (data.chosen) {
        targetKeys.push(data.key);
      }
      mockData.push(data);
    }
    setTargetKeys(targetKeys);
    setMockData(mockData);
  };

  const filterOption = (inputValue, option) =>
    option.description.indexOf(inputValue) < -1;

  const handleChange = (changeKeys) => {
    let tag = [];
    forEach(mockData, (mock) => {
      tag.push(
        find(changeKeys, (key) => {
          return mock.key === key;
        }),
      );
    });
    console.log('handleChange', tag);
    setTargetKeys(tag);
  };

  const handleSearch = (dir, value) => {
    console.log('search:', dir, value);
  };

  const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    console.log('onSelectChange:', sourceSelectedKeys, targetSelectedKeys);
    setTargetSelectedKeys(targetSelectedKeys);
  };

  const up = () => {
    console.log('[up]', targetKeys);
    console.log('[up]', targetSelectedKeys);
  };
  const down = () => {
    console.log('[down]', targetKeys);
    console.log('[down]', targetSelectedKeys);
  };
  const disVisit = () => {
    setVisableTransfer(false);
  };

  useEffect(() => {
    getMock();
  }, []);

  //---------------设置列

  return (
    <div>
      {/* <Upload maxCount={1} listType={"picture"}> */}
      <Dragger
        maxCount={1}
        listType={'picture'}
        name="file"
        onChange={onChange}
        beforeUpload={function () {
          return false;
        }}
        showUploadList={true}
      >
        <p className="ant-upload-text">
          <span>点击上传文件</span>
          或者拖拽上传
        </p>
      </Dragger>
      {/* </Upload> */}
      {visableTransfer && (
        <div>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Transfer
              dataSource={mockData}
              showSearch
              filterOption={filterOption}
              targetKeys={targetKeys}
              onChange={handleChange}
              onSearch={handleSearch}
              onSelectChange={onSelectChange}
              render={(item) => item.title}
            />
            <div style={{ display: 'grid' }}>
              <Button
                type="primary"
                style={{ margin: '10px' }}
                shape="round"
                onClick={up}
              >
                上移
              </Button>
              <Button
                type="primary"
                style={{ margin: '10px' }}
                shape="round"
                onClick={down}
              >
                下移
              </Button>
            </div>
          </div>
          <div>
            <Button type="primary" shape="round" onClick={disVisit}>
              保存
            </Button>
          </div>
        </div>
      )}
    </div>
  );
};
export default connect(({ enoadTask, loading }) => ({
  ...enoadTask,
  loading,
}))(XlsxController);
